<template>
  <div class="body">
    <el-form ref="ruleForm" :model="mdl" label-width="130px">
        <el-form-item label="轮播图" required>
          <el-upload
            ref="upload"
            list-type="picture-card"
            action
            :file-list="fileList"
            :show-file-list="true"
            :http-request="uploadFile"
            accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
            :limit="5"
            :on-change="handlePreview"
            :on-exceed="handleExceed"
            :on-remove="handeRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="房间名" required>
          <el-input
            v-model="mdl.roomName"
            placeholder="请输入房间名"
          />
        </el-form-item>
        <el-form-item label="单价" required>
          <el-input
            v-model="mdl.price"
            placeholder="请输入单价"
          />
        </el-form-item>
        <el-form-item label="锁id" required>
          <el-input v-model="mdl.lockCode" placeholder="请输入锁id" />
        </el-form-item>
        <el-form-item label="继电器id" required>
          <el-input v-model="mdl.relaysHostId" placeholder="请输入继电器id" />
        </el-form-item>
        <el-form-item label="音响id" required>
          <el-input v-model="mdl.soundId" placeholder="请输入音响id" />
        </el-form-item>
        <el-form-item label="房间类型" required>
          <el-select v-model="mdl.roomTypeId" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间标签" required>
          <el-select multiple v-model="labelArr" placeholder="请选择">
            <el-option
              v-for="item in labelList"
              :key="item.id"
              :label="item.labelName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间介绍" required>
          <el-input v-model="mdl.introduce" type="textarea" placeholder="请输入房间" />
        </el-form-item>
        <!-- <el-form-item label="备注" required>
          <el-input v-model="mdl.remarks" type="textarea" placeholder="请输入备注" />
        </el-form-item> -->
        <el-form-item label="排序" required>
          <el-input v-model="mdl.sort" type="text" placeholder="请输入排序" />
        </el-form-item>
      
    </el-form>
    <div class="foot_btn">
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="submitForm('ruleForm')"
      >提交</el-button>
      <el-button @click="handleCloseDrawer">取消</el-button>
    </div>
  </div>
</template>

<script>
import { fileUpload, addRoom, updateRoom,getRoomTypeListByStore,getAllRoomLabelList } from '@/api/user'
export default {
  name: 'FormModel',
  props: {
    mdl: {
      type: Object,
      required: true
    },
    handleCloseDrawer: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      fileList: [],
      uploadData: null,
      imgList: [],
      typeList:[],
      labelList:[],
      labelArr:[]
    }
  },
  mounted() {
    if (this.mdl.id) {
      // console.log(this.mdl)
      if(this.mdl.roomImg.length){
        this.mdl.roomImg.map(item => {
          this.fileList.push({
            url: item
          })
        })
        this.imgList = this.mdl.roomImg
      }
      
    }

    this.getTypeList()

    this.getLabelList()

  },
  methods: {

    // 获取label
    getLabelList(){
      getAllRoomLabelList().then(res=>{
        if (res.statusCode === '00000') {
          this.labelList = res.data
          if(this.mdl.labelList.length){
            this.mdl.labelList.map(item=>{
              this.labelArr.push(item.labelId)
            })
          }
        }
      })
    },

    // 移除上传图片
    handeRemove(e){
      console.log(e)
      let index = this.imgList.findIndex(item => item == e.url)
      
      this.imgList.splice(index, 1)
      console.log(this.imgList)
    },

    // 获取房间类型
    getTypeList(){
      getRoomTypeListByStore({storeId:'766639530495164416'}).then(res=>{
        if (res.statusCode === '00000') {
          this.typeList = res.data
        }
      })
    },

    // 上传图片
    uploadFile(e) {
      fileUpload(this.uploadData).then((res) => {
        if (res) {
          // this.mdl.roomImg = res.data
          this.imgList.push(res.data)
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          console.log(res)
        } else {
          this.$message.error(res.status)
        }
      })
    },
    handleExceed(file) {
      this.$message({
        message: '封面文件只允许上传五张，如需重新上传请删除已存在封面',
        type: 'warning'
      })
    },
    // 获取上传文件信息
    handlePreview(file) {
      const _this = this
      var formData = new FormData()
      formData.append('file', file.raw)
      _this.uploadData = formData
    },

    // 提交
    submitForm() {
      this.mdl.oneList = []
      if (this.imgList.length) {
        this.mdl.roomImg = this.imgList
      }

      if (this.mdl.id) {
        this.mdl.roomId = this.mdl.id
      }
      this.labelArr.map((item,index)=>{
        this.mdl.oneList.push({
          labelId:item,
          orderCode:index
        })
      })
      this.mdl.storeId = '766639530495164416'
      const request = this.mdl.id ? updateRoom(this.mdl) : addRoom(this.mdl)
      request.then((res) => {
        if (res.statusCode === '00000') {
          this.$message({ message: '提交成功', type: 'success' })
          // 关闭弹窗
          this.handleCloseDrawer()
          // 调用父级组件刷新数据
          this.$emit('getList')
        }
      })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
        })
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  padding-right: 25px;
  .foot_btn{
    width:150px;
    margin: 0 auto;
  }
}

/deep/ .el-checkbox__label {
  font-size: 12px;
}
</style>
